<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        multimage/index.html
    </h1>

    This is an example of showing two mr images and one ct image on one page.  Note that two different
    imageId plugins are used in this case - one for the mr images and one for the ct image.

    <br>
    <br>

    <div id="mr1" style="width:256px;height:256px;display:inline-block"
         oncontextmenu="return false"
         onmousedown="return false">
    </div>
    <div id="mr2" style="width:256px;height:256px;display:inline-block"
         oncontextmenu="return false"
         onmousedown="return false">
    </div>
    <div id="ct1" style="width:512px;height:512px"
         oncontextmenu="return false"
         onmousedown="return false">
    </div>

</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoaderCt.js"></script>

<script>
    // image enable the elements
    const mr1 = document.getElementById('mr1');
    cornerstone.enable(mr1);

    const mr2 = document.getElementById('mr2');
    cornerstone.enable(mr2);

    const ct1 = document.getElementById('ct1');
    cornerstone.enable(ct1);

    // load and display the images
    cornerstone.loadAndCacheImage('example://1').then(function(image) {
        cornerstone.displayImage(mr1, image);
    });
    cornerstone.loadAndCacheImage('example://2').then(function(image) {
        cornerstone.displayImage(mr2, image);
    });
    cornerstone.loadAndCacheImage('ctexample://1').then(function(image) {
        cornerstone.displayImage(ct1, image);
    });
</script>
</html>
